<template>
  <div class="details">
    <div class="admin-box">
      <!--头像-->
      <div class="admin-img" @click="imgshow = true">
        <img :src="beautyMsg.img">
      </div>
      <!--名字-->
      <p class="admin-name" v-show="beautyMsg">
        <span v-text="beautyMsg.self_no+ '.'+beautyMsg.name"></span>
      </p>
      <!--宣言-->
      <p class="admin-of" v-text="beautyMsg.short_intro"></p>
      <!--投票   不是进入自己的页面的情况下显示-->
      <div class="admin-btn" v-if="role == 2">
        <button @click='voteHer(fansNumber)' class="vote-btn-s">为她投票</button>
      </div>
    </div>
    <!--个人介绍-->
    <div class="admin-introduce container" v-text="beautyMsg.remark">
    </div>
    <!--默认不是 选手 -->
    <div class="pf" v-if="role==2">
      <!--判断登陆状态-->
      <div v-show="login" v-text="'拥有粉丝卡:   '+fansNumber"></div>
      <!--登陆 是否是选手-->
      <router-link to='/getFansCard?liren=2'>
        <button v-text="login?'获取更多':'查看我的粉丝卡'"></button>
      </router-link>
    </div>
    <!--登陆了 是选手-->
    <div class="pf" v-show="login && role == 1">
      <!--登陆 是否是选手-->
      <router-link :to='"/detailsMe?id="+option_id'>
        <button v-text="'去我的主页'"></button>
      </router-link>
    </div>
    <!-- 为他投票弹窗 -->

    <x-dialog v-model="fansCardShow" hide-on-blur>
      <div class="fans-card-bg">
        <div class="xinsui"></div>
        <div class="card-defi">当前拥有0张粉丝卡，无法投票</div>
        <div>
          <router-link class='card-btn' to='/getFansCard?liren=2'>
            领取粉丝卡
          </router-link>
        </div>
      </div>
    </x-dialog>
    <x-dialog v-model="imgshow" hide-on-blur
              :dialog-style="{'max-width': '80%', width: '80%', height: '60%', 'background-color': 'transparent','top': '45%'}">
      <div><img style="width: 100%;height: 100%;display: block" :src="beautyMsg.img_big"></div>
    </x-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import {getBeautyMsg, getFansCard, getConfig, shareCallback} from '../../api'
  import {mapState} from 'vuex'
  import {XDialog} from 'vux'
  export default {
    data() {
      return {
        // 粉丝卡数量
        fansNumber: 0,
        // 粉丝卡弹窗
        fansCardShow: false,
        // 个人信息
        beautyMsg: '',
        self_no: '',
        imgshow: false
      }
    },
    methods: {
      //为她投票
      voteHer(fansNumber){
        if (this.login) {
          if (Number(fansNumber) > 0) { // 如果有粉丝卡
            this.$router.push({path: '/getFansCard?liren=1'})
          } else {
            this.fansCardShow = true
          }
        } else {
          this.$store.commit('showLogin', {
            LoginShow: true
          })
        }
      },
//      获取丽人信息
      _getBeautyMsg(){
        this.$http.get(getBeautyMsg(this.$route.query.id)).then(res => {
          this.beautyMsg = res.data.data;
          this.self_no = res.data.data.self_no
        })
      },
//      获取粉丝卡
      _getFansCard(){
        this.$http.get(getFansCard(window.localStorage.getItem('token'), window.localStorage.getItem('member_id'))).then(res => {
          this.fansNumber = res.data.data.cards;
        })
      },
    },
    computed: {
      ...mapState({
        //角色
        login: state => state.vux.isLogin,
        role: state => state.vux.adminMsg.role,
        id: state => state.vux.adminMsg.id,
        option_id: state => state.vux.adminMsg.option_id,
      })
    },
    created(){
      // 获取丽人信息
      this._getBeautyMsg();
      if (this.login) {
        // 获取粉丝卡数量
        this._getFansCard()
      }
      window.sessionStorage.setItem('liren_id', this.$route.query.id);
      var link = window.location.href;
      this.wxShare('这一次,我想和你一起走在美丽的路上', '我正在参加中国丽人秀海选盛典,诚请你为我投上宝贵的一票', link)
    },
    components: {
      XDialog
    },
    watch: {
      login: function () {
        if (this.login) {
          this._getFansCard()
        }
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  @col: #ed007c;
  .details {
    background: #f5f5f5;
  }

  .admin-box {
    height: 300px;
    background: #fff;
    margin-bottom: 10px;
    text-align: center;
    .admin-img {
      background: url("../../../static/images/bg.png") no-repeat;
      background-size: cover;
      height: 6.4rem;
      width: 6.4rem;
      border-radius: 10px;
      margin: 15px auto 10px auto;
      overflow: hidden;
      img {
        width: 100%;
        display: block;

      }
    }
    .admin-name {
      font-size: 17px;
      color: #666;
    }
    .admin-of {
      font-size: 12px;
      color: #999;
      height: 20px;
      line-height: 20px;
      margin-bottom: 20px;
    }
  }

  .admin-introduce {
    font-size: 13px;
    color: #333;
    background: #fff;
    padding-top: 10px;
  }

  // 按钮
  .vote-btn-s {
    background: #ed007c;
    width: 40%;
    height: 40px;
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
  }

  .pf {
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    > div {
      background: #ffd7ec;
      height: 23px;
      font-size: 14px;
      color: #666666;
      line-height: 23px;
    }
    a {
      display: block;
    }
    button {
      width: 100%;
      background: @col;
      height: 50px;
      color: #fff;
      font-size: 15px;
    }
  }

  // 为他投票粉丝卡
  .fans-card-bg {
    background: #fff;
    height: 225px;
    border-radius: 5px;
    .xinsui {
      margin: 20px auto 25px auto;
      background: url("../../../static/images/xinsui.png") no-repeat;
      background-size: cover;
      width: 95px;
      height: 53px;
    }
    .card-defi {
      text-align: center;
      font-size: 15px;
      color: #333;
    }
    .card-btn {
      display: inline-block;

      margin: 38px auto 0 auto;
      background-color: #ed007c;
      line-height: 40px;
      color: #fff;
      font-size: 15px;
      width: 60%;
      height: 40px;
      border-radius: 5px;
    }
  }
</style>



